<template>
  <div class="app-container">
    <!-- 查询条件开始 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="98px">
      <el-form-item label="供应商名称" prop="providerId">
        <el-select
          v-model="queryParams.providerId"
          placeholder="请选择供应商名称"
          clearable
          size="small"
          style="width:180px"
        >
          <el-option
            v-for="dict in providerOptions"
            :key="dict.providerId"
            :label="dict.providerName"
            :value="dict.providerId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="申请人" prop="applyUserName">
        <el-input
          v-model="queryParams.applyUserName"
          placeholder="请输入申请人"
          clearable
          size="small"
          style="width:180px"
        />
      </el-form-item>
      <el-form-item label="单据状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="单据状态"
          clearable
          size="small"
          style="width:180px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="delQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件结束 -->

    <!-- 表格工具按钮开始 -->
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleToNewPurchase">新增采购</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini"   @click="handleDoAudit">提交审核</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDoInvalid" >作废</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-edit" size="mini" @click="handleDoInventory">提交入库</el-button>
      </el-col>
    </el-row>
    <!-- 表格工具按钮结束 -->

    <!-- 数据表格开始 -->
    <el-table v-loading="loading" border :data="purchaseTableList" @selection-change="handleSelectionChnage">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="单据ID" align="center" width="200" prop="purchaseId">
        <template slot-scope="scope">
			<!-- <router-link  class="link-type"> -->
			<router-link :to="{name:'editPurchase', query: {id:scope.row.purchaseId}}" class="link-type">
            <span>{{ scope.row.purchaseId }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="供应商" width="180" align="center" prop="providerId" :formatter="providerFormatter" />
      <el-table-column label="采购批发总额" align="center" prop="purchaseTradeTotalAmount">
        <template slot-scope="scope">
          <span>{{ scope.row.purchaseTradeTotalAmount}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter" />
      <el-table-column label="申请人" align="center" prop="applyUserName" />
      <el-table-column label="入库操作人" align="center" prop="storageOptUser" />
      <el-table-column label="入库时间" width="180" align="center" prop="storageOptTime" />
      <el-table-column label="审核信息" align="center" prop="auditMsg" />
      <el-table-column label="创建时间" width="180" align="center" prop="createTime" />
    </el-table>
    <!-- 数据表格结束 -->
    <!-- 分页控件开始 -->
    <el-pagination
      v-show="total>0"
      :current-page="pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handLeSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 分页控件结束 -->
  </div>
</template>
<script>
// 引入api

import { provide } from 'vue';

export default {
  // 过滤器
  filters: {
    // 保留两位小数
    rounding(value) {
      return value.toFixed(2)
    }
  },

  deactivated () {
    //解决vue组件 前进刷新，后退不刷新，
    //$destroy完全销毁一个实例，清理它与其它实例的连接，解绑它的全部指令及事件监听器。
    this.$destroy();
  },



  // 定义页面数据
  data() {
    return {
      // 是否启用遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      purchaseIds:[],
      // 分页数据总条数
      total: 0,
	  pageNum: 1,
	  pageSize: 5,
      // 字典表格数据
      purchaseTableList: [],
      // 状态数据字典
      statusOptions: [],
      // 供应商的数据
      providerOptions: [],
      // 查询参数
      queryParams: {
        providerId: undefined,
        applyUserName: undefined,
        status: undefined
      },

    }
  },
  // 勾子
  created() {

    // 查询表格数据
    this.initPurchaseList();
	this.initStatu();
	this.initProvider();

  },

  // 方法
  methods: {
    // 查询表格数据
    initPurchaseList() {
            this.loading = true // 打开遮罩
            this.$http.post("/stock/api/pur/pasi/"+ this.pageNum+"/"+this.pageSize, this.queryParams).then(result => {
              this.purchaseTableList = result.data.data.records
              this.total = result.data.data.total
              this.loading = false// 关闭遮罩
            })
    },

    //下拉框供应商
	initProvider() {
		this.$http.get("stock/api/provider/getAll").then(result => {
			this.providerOptions = result.data.data
		})
	},

    //下拉框状态
	initStatu() {
		this.$http.get("stock/api/user/findByType/his_order_status").then(result => {
			this.statusOptions = result.data.data
		})
	},

	//from表单显示双表关联替换数据//状态
				statusFormatter(row){
					let v=row.status;
					return this.formatDict2(this.statusOptions,v)
				},
	//from表单显示双表关联替换数据//状态
				providerFormatter(row){
					let v=row.providerId;
						for(let i=0;i<this.providerOptions.length;i++){
								if(this.providerOptions[i].providerId==v){
									return this.providerOptions[i].providerName;
								}
							}
							return "";
				},

	// 分页pageSize变化时触发
	    handLeSizeChange(val) {
	      this.pageSize = val
	      // 重新查询
	      this.initPurchaseList()
	    },

	    // 点击上一页  下一页，跳转到哪一页面时触发
	    handleCurrentChange(val) {
	      this.pageNum = val
	      // 重新查询
	      this.initPurchaseList()
	    },

		handleQuery() {
          this.pageNum=1;
		  this.initPurchaseList()
		},

    //重置
       delQuery() {
      this.queryParams={}
      this.pageNum=1
      this.initPurchaseList()
    },

		// 跳转到新增采购的路由页面
		handleToNewPurchase() {
		  this.$router.replace('newPurchase')
		},

    // 提交审核
    handleDoAudit() {
        const tx = this
        tx.$confirm('是否确认提交此单据的数据?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.post("stock/api/pur/tjsh/", this.purchaseIds[0]).then(res => {
            if (res.data.data){
              tx.$message.success('提交审核成功')
            tx.handleQuery()// 全查询
            }
          }).catch(() => {
            tx.$message('提交审核失败')
          })
        }).catch(() => {
          tx.$message('提交已取消')
        })
    },

    handleDoInvalid(){
      const tx = this
      tx.$confirm('是否确认提交此单据的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("stock/api/pur/zf/", this.purchaseIds[0]).then(res => {
          if (res.data.data){
            tx.$message.success('提交审核成功')
            tx.handleQuery()// 全查询
          }
        }).catch(() => {
          tx.$message('提交审核失败')
        })
      }).catch(() => {
        tx.$message('提交已取消')
      })
    },

    //提交入库
    handleDoInventory(){
      const tx = this
      const purchaseId=this.purchaseIds[0].purchaseId
      console.log("+++++++++"+purchaseId)
      tx.$confirm('是否确认提交此单据的数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("stock/api/pur/rk/"+purchaseId+"/").then(res => {
            tx.$message.success('提交审核成功')
            tx.handleQuery()// 全查询

        }).catch(() => {
          tx.$message('提交审核失败')
        })
      }).catch(() => {
        tx.$message('提交已取消')
      })
    },


    handleSelectionChnage(val) {
      this.purchaseIds = val
    },
  }
}
</script>
